import React, { Component } from 'react';
import { Input, Button, message } from 'antd';
import { SearchOutlined } from '@ant-design/icons';
import { Table } from 'antd';
import axios from '../../../../../../util/axios';
import { connect } from "react-redux"
class Goods_size extends Component {
    state = {
        selectionType: "checkbox",
        data: [],
        loading: true,
        searchVal: '',
        isShow: false,
        addData: true,
        columns: [
            {
                title: 'ID',
                key: 'id',
                dataIndex: 'id',
                align: 'center',
            },
            {
                key: "name",
                title: '规格名称',
                dataIndex: 'name',
                align: 'center',
            },
            {
                key: "property",
                title: '商品规格',
                dataIndex: 'property',
                align: 'center',
            },
            {
                key: "specification",
                title: '商品属性',
                align: 'center',
                dataIndex: 'specification',
            },
            {
                title: '操作',
                align: 'center',
                render: (text, record) => <div className='Goods_sizebtn'><Button type="primary" onClick={() => { this.changeInp(record) }}>编辑</Button><Button type="primary" danger onClick={() => this.deleteItem(record)}>删除</Button> </div>
            },
        ],
        inpObj: {
            name: "",
            property: "",
            specification: ""
        }

    }
    componentDidMount() {
        this.getData()
    }
    //删除数据
    deleteItem = (record) => {

        axios.get(`/guigdetile?id=${record.id}`).then(res => {
            if (res.data.code === 200) {
                this.getData()
                message.success(res.data.msg)
            }
        })
    }
    getData = () => {
        this.setState({
            loading: true
        })
        axios.get('/guige').then(res => {
            console.log(res)
            if (res.data.code === 200) {
                setTimeout(() => {
                    this.setState({
                        data: res.data.data,
                        loading: false
                    })
                }, 400);
            }
        })
    }
    //搜索框
    changeValue = (e) => {
        this.setState({
            searchVal: e.target.value,
            loading: false
        })
        if (!e.target.value) {
            this.getData()
        }
    }
    submitVal = () => {
        this.setState({
            loading: true
        })
        axios.get(`/guigesearch?name=${this.state.searchVal}`).then(res => {

            if (res.data.code === 200) {
                setTimeout(() => {
                    this.setState({
                        data: res.data.data,
                        loading: false
                    })
                    message.success(res.data.msg);
                }, 800);
            }
        })
    }
    //新增
    addShop = () => {
        this.setState({
            isShow: true,
            addData: true
        })
    }
    //编辑
    changeInp = (record) => {
        this.setState({
            isShow: true,
            addData: false,
            inpObj: {
                name: record.name,
                property: record.property,
                specification: record.specification
            }

        })
        console.log(record)
    }
    //确定
    submitChange = () => {
        if (this.state.addData) {
            this.setState({
                inpObj: {
                    ...this.state.inpObj,
                    id: 1
                }
            })
        } else {
            console.log(this.state.inpObj)
            axios.get('/changeVal').then(res => {
                console.log(res)
            })
        }
        this.setState({
            isShow: false,
            inpObj: {
                name: "",
                property: "",
                specification: ""
            }
        })
    }
    //取消
    cancleIt = () => {
        this.setState({
            isShow: false,
            inpObj: {
                name: "",
                property: "",
                specification: ""
            }
        })
    }
    onFinish = (values) => {

    };
    changeName = (e) => {
        this.setState({
            inpObj: {
                ...this.state.inpObj,
                name: e.target.value,

            }
        })
    }
    changeProperty = (e) => {
        this.setState({
            inpObj: {
                ...this.state.inpObj,
                property: e.target.value
            }
        })
    }
    changeSpeci = (e) => {
        this.setState({
            inpObj: {
                ...this.state.inpObj,
                specification: e.target.value
            }
        })
    }

    //批量删除
    allDelete = () => {
        axios.get('/alldleat').then(res => {

            if (res.data.code === 200) {
                message.success(res.data.msg)
                this.getData()
            } else {
                message.error(res.data.msg)
            }
        })
    }
    render() {
        return (
            <div className='Goods_size'>
                <div className="searchInp">
                    <p>规格搜索:</p>  <Input placeholder="Basic usage" value={this.state.searchVal} onChange={this.changeValue} />
                    <Button type="primary" icon={<SearchOutlined />} onClick={this.submitVal}>
                        Search
                    </Button>
                </div>
                <div className="delandAdd">
                    <Button onClick={this.addShop} type="primary">
                        添加商品规格
                    </Button>
                    <Button onClick={this.allDelete}>
                        批量删除
                    </Button>
                </div>
                <div className='table'>
                    <Table
                        columns={this.state.columns}
                        loading={this.state.loading}
                        dataSource={this.state.data}
                        rowSelection='checkbox'
                        rowKey="id"
                        scroll={{ y: 540 }}
                    />

                </div>
                <div className="mGoods_size_ask" style={{ display: this.state.isShow ? "block" : "none" }}>
                    <div className="Goods_size_maskInner">
                        <h3>
                            {
                                this.state.addData ? "新增" : "编辑"
                            }
                        </h3>
                        <div className="inpList">
                            <p>
                                商品名称 : <input type="text" value={this.state.inpObj.name} onChange={this.changeName} />
                            </p>
                            <p>
                                商品规格 : <input type="text" value={this.state.inpObj.property} onChange={this.changeProperty} />
                            </p>
                            <p>
                                商品属性  : <input type="text" value={this.state.inpObj.specification} onChange={this.changeSpeci} />
                            </p>
                            <Button type="primary" onClick={this.submitChange}>确定</Button><Button onClick={this.cancleIt}>取消</Button>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

export default connect()(Goods_size);